<template>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" label-position="left" v-loading="loading">
        <el-form-item label="标题" required prop="name">
            <el-input v-model="form.name" placeholder="文章标题" size="small" clearable class="input"></el-input>
        </el-form-item>
        <el-form-item label="种类">
            <el-input type="text" v-model="form.type" class="input"></el-input>
        </el-form-item>
         <el-form-item label="规格">
            <el-input type="text" v-model="form.size" class="input"></el-input>
        </el-form-item>
         <el-form-item label="原产地">
            <el-input type="text" v-model="form.origin" class="input"></el-input>
        </el-form-item>
         <el-form-item label="交易地">
            <el-input type="text" v-model="form.trad_place" class="input"></el-input>
        </el-form-item>
         <el-form-item label="价格">
            <el-input type="text" v-model="form.price" class="input"></el-input>
        </el-form-item>
         <el-form-item label="推荐">
            <el-switch v-model="form.rec"></el-switch>
        </el-form-item>
        <el-form-item label="详情文字描述" required prop="detail_text">
            <el-input type="textarea" v-model="form.detail_text" class="input"></el-input>
        </el-form-item>

        <el-form-item label="详情图片描述" size="normal">
            <el-upload
            :action=uploadAction
            list-type="picture-card"
            :file-list="form.img_list"
            :on-success="handleUploadSuccess2"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img style="height: 400px; object-fix: contain" :src="dialogImageUrl">
            </el-dialog>
        </el-form-item>
        
        <!-- http://jr1test.oss-cn-beijing.aliyuncs.com/upload/20201214/db2c70c7ac862230f1e5baba6d0447ae.png -->
        <el-form-item label="缩略图">
            <el-input v-model="form.thumb" placeholder="可留空，将从内容提取" size="small" clearable class="input"></el-input>
            <el-upload
            action="http://localhost/api/upload"
            :on-success="handleUploadSuccess"
            >
                <el-button type="text" size="large">
                    <i class="el-icon-upload"></i>
                </el-button>
                <template #tip>只能上传图片，不能超过1M</template>
            </el-upload>
        </el-form-item>
       
        
        <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>
    </el-form>
</template>


<script>

//api
import { adminSupply } from '@/api/content.js'
import { mapMutations, mapState } from 'vuex'
export default {
    name: "SupplyEdit",
    components: {
        
    },
    data(){
        return {
            dialogVisible: false,
            dialogImageUrl: "",
            form: {
                id: '',
                name: '',
                type: '',
                size: '',
                origin: '',
                trad_place: '',
                add_time: '',
                update_time: '',
                price: '',
                rec: '',
                detail_text: '',
                img_list: [],
                thumb: '',
            },
            uploadAction: 'http://localhost/api/upload/supply?id=',
            rules: {
                name: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                ],
                detail_text: [
                    { required: true, message: '请填写文章内容', trigger: 'blur' }
                ]
            },
            
        }
    },
    mounted(){
        this.form = this.editSupply
        this.uploadAction += this.form.id
        if (this.form) {
            this.form.rec = true
        }else{
            this.form.rec = false
        }
    },
    computed: {
        ...mapState('as', [
            'editSupply',
            'loading'
        ])
    },
    methods: {
        ...mapMutations('as', [
            'unshiftSupply',
            'cancelEdit',
            'setLoading',
            'changeSupply',
        ]),
        async onSubmit(){
            this.setLoading(true);
            console.log('loading', this.loading)
            if (this.form.title === "" || this.form.content == ""){
                this.$message({
                    showClose: true,
                    type: "error",
                    message: "请将标题、内容填写完整",
                })
                this.setLoading(false);
                return;
            }
            let data = await adminSupply.edit(this.form);
            console.log('data', data)
            this.setLoading(false);
            this.$message({
                showClose: true,
                type: 'success',
                message: "修改成功"
            })
            this.form = {
                id: '',
                name: '',
                type: '',
                size: '',
                origin: '',
                trad_place: '',
                add_time: '',
                update_time: '',
                price: '',
                rec: '',
                detail_text: '',
                img_list: [],
                thumb: '',
            };
            this.changeSupply(data.supply)
            console.log('res', data)
        },
        handleUploadSuccess(response){
            this.form.image = response.url
        },
        async handleRemove(file){   
            console.log(file.name)
            let data = await adminSupply.removeDetailImg(file.name);
            if(data){
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: "删除成功"
                })
            }else{
                this.$message({
                    showClose: true,
                    type: 'error',
                    message: "删除失败"
                })
            }
        },
        handlePictureCardPreview(file){
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleUploadSuccess2(response, file){
            if(response){
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: '添加成功',
                })
            }
            file.name = response.name
            file.url = response.url
            console.log('res', response)
            console.log('file', file)
        }
        
    }
    
}
</script>

<style lang="scss" scope>
.article-table-container {
    margin: 0 auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
}
.input {
    max-width: 60%;
}
</style>